<template>
  <div class="container">
    <h1>新建角色信息</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>基础信息</span>
    <div class="body">
      <div class="input">
        <div class="input-left">
          <span>项目名称</span>
        </div>
        <div class="input-right">
          <el-input v-model="item_name" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>收费方式</span>
        </div>
        <div class="input-right">
          <el-select v-model="charge_method" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <!-- <div class="input">
        <div class="input-left">
          <span>收费仪表</span>
        </div>
        <div class="input-right">
          <el-select v-model="meter_type" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div> -->
      <div class="input">
        <div class="input-left">
          <span>费用单价</span>
        </div>
        <div class="input-right">
          <el-input v-model="unit_price" type="number" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>计量单位</span>
        </div>
        <div class="input-right">
          <el-select v-model="unit" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>计算精度</span>
        </div>
        <div class="input-right">
          <el-input v-model="calculation" type="number" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>滞纳金比例</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="late_fee_rate"
            type="number"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>计算公式</span>
        </div>
        <div class="input-right">
          <div style="display: flex">
            <span style="display: flex; width: 150px; margin: 0 1rem 0 1rem"
              >仪表量 * 单价 *</span
            >
            <el-input
              v-model="value1"
              type="number"
              style="width: 120px; height: 36px"
              placeholder="请输入"
            />
            <span style="display: flex; width: 20px; margin: 0 1rem 0 1rem"
              >+</span
            >
            <el-input
              v-model="value2"
              type="number"
              style="width: 120px; height: 36px"
              placeholder="请输入"
            />
          </div>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>备注</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="remark"
            type="textarea"
            :rows="5"
            placeholder="请输入"
          />
        </div>
      </div>
      <div style="margin: 2rem 0 2rem 12rem">
        <el-button type="primary" @click="addOrUpdate">提交</el-button>
        <el-button type="default" @click="to('payment/payItems')"
          >返回</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import to from "@/utils/to.js";
import axios from "axios";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";

const route = useRoute();
const id = route.query.id;

const item_name = ref("");
const charge_method = ref("");
const unit_price = ref("");
const unit = ref("");
const calculation = ref("");
const late_fee_rate = ref("");
const value1 = ref(1);
const value2 = ref(0);
const remark = ref("");

const options1 = [
  { value: "按周收费", label: "按周收费" },
  { value: "按月收费", label: "按月收费" },
  { value: "仪表收费", label: "仪表收费" },
];

const options2 = [
  { value: "度", label: "度" },
  { value: "立方", label: "立方" },
  { value: "升", label: "升" },
];

const addOrUpdate = () => {
  let config = {};

  if (id === undefined || id === "") {
    config = {
      url: "http://localhost:8080/pay/item/createItem",
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        itemName: item_name.value,
        chargeMethod: charge_method.value,
        unitPrice: unit_price.value,
        unit: unit.value,
        calculationPrecision: calculation.value,
        lateFeeRate: late_fee_rate.value,
        formula: "仪表量*单价*" + value1.value + "+" + value2.value,
        remark: remark.value,
      },
    };
  } else {
    config = {
      url: "http://localhost:8080/pay/item/updateItem",
      method: "PUT",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        id: id,
        itemName: item_name.value,
        chargeMethod: charge_method.value,
        unitPrice: unit_price.value,
        unit: unit.value,
        calculationPrecision: calculation.value,
        lateFeeRate: late_fee_rate.value,
        formula: "仪表量 * 单价 * " + value1.value + " + " + value2.value,
        remark: remark.value,
      },
    };
  }

  const response = axios(config);
  response
    .then((data) => {
      if (data.data.code === 1) {
        ElMessage({
          message: data.data.msg,
          type: "success",
        });
        setTimeout(() => {
          to("payment/payItems");
        }, 2000);
      } else {
        ElMessage({
          message: data.data.msg,
          type: "error",
        });
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const get = () => {
  const config = {
    url: `http://localhost:8080/pay/item/get/${id}`,
    method: "GET",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      item_name.value = data.data.data.itemName;
      charge_method.value = data.data.data.chargeMethod;
      unit_price.value = data.data.data.unitPrice;
      unit.value = data.data.data.unit;
      calculation.value = data.data.data.calculationPrecision;
      late_fee_rate.value = data.data.data.lateFeeRate;
      const value = data.data.data.formula.substring(11).split(" + ");
      value1.value = value[0];
      value2.value = value[1];
      remark.value = data.data.data.remark;
    })
    .catch((error) => {
      console.log(error);
    });
};

onMounted(() => {
  get();
});
</script>

<style scoped>
.container {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin: 1rem 2rem 1rem 0;
  line-height: 24px;
  width: 100px;
  text-align: right;
}

.body {
  display: grid;
  justify-content: center;
  align-items: center;
}

.input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.input-right {
  width: 360px;
}
</style>
